<template>
  <div>
    <button @click="onClick">按钮</button>
    <!-- 数组形式 -->
    <p :class="['blue', 'font-bold']">Hello world!</p>
    <p :class="arr">Hello world!</p>
    <!-- 数组形式 嵌套对象 -->
    <p :class="['blue', { 'font-bold': isFontBold }]">Hello world!</p>
    <p :class="['blue', obj]">Hello world!</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    arr: ['blue', 'font-bold'],
    isFontBold: true,
    obj: { 'font-bold': true }
  }),
  methods: {
    onClick() {
      this.isFontBold = !this.isFontBold
      this.obj['font-bold'] = !this.obj['font-bold']
    }
  }
}
</script>

<style scoped>
.blue {
  color: #17f;
}

.font-bold {
  font-weight: bold;
}
</style>
